<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Dashboard">
<meta name="keyword"
	content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
<title>Dashio - Bootstrap Admin Template</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>	
<script
	src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!-- Favicons -->
<link href="../img/favicon.png" rel="icon">
<link href="../img/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Bootstrap core CSS -->
<link
	href="${pageContext.request.contextPath }/lib/bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<!--external css-->
<link
	href="${pageContext.request.contextPath }/lib/font-awesome/css/font-awesome.css"
	rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="../css/zabuto_calendar.css">
<link rel="stylesheet" type="text/css"
	href="../lib/gritter/css/jquery.gritter.css" />
<!-- Custom styles for this template -->
<link href="${pageContext.request.contextPath }/css/style.css"
	rel="stylesheet">
<link
	href="${pageContext.request.contextPath }/css/style-responsive.css"
	rel="stylesheet">
<script src="${pageContext.request.contextPath }/lib/chart-master/Chart.js"></script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script
	src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>


<!-- =======================================================
    Template Name: Dashio
    Template URL: https://templatemag.com/dashio-bootstrap-admin-template/
    Author: TemplateMag.com
    License: https://templatemag.com/license/
  ======================================================= -->

</head>

<body>
	<section id="container">
		<!-- **********************************************************************************************************************************************************
        TOP BAR CONTENT & NOTIFICATIONS
        *********************************************************************************************************************************************************** -->
		<!--header start-->
		<header class="header black-bg">
			<div class="sidebar-toggle-box">
				<div class="fa fa-bars tooltips" data-placement="right"
					data-original-title="Toggle Navigation"></div>
			</div>
			<!--logo start-->

			<div class="top-menu">
				<ul class="nav pull-right top-menu">
					 <li><a class="logout" href="${pageContext.request.contextPath }/UserController?op=exit">退出登录</a></li>
				</ul>
			</div>
		</header>
		<!--header end-->
		<!-- **********************************************************************************************************************************************************
        MAIN SIDEBAR MENU
        *********************************************************************************************************************************************************** -->
		<!--sidebar start-->
		<aside>
			<div id="sidebar" class="nav-collapse ">
				<!-- sidebar menu start-->
				<ul class="sidebar-menu" id="nav-accordion">
					<p class="centered"><a href="index.jsp">
			        	<!--管理员头像-->
			          <!-- 默认头像 -->
						<c:if test="${sessionScope.backUser.u_img ==null}">
							<img  src="${pageContext.request.contextPath }/images/ui-sam.jpg" class="img-circle" width="80" />
						</c:if>
						<!-- 自定义头像 -->
						<c:if test="${sessionScope.backUser.u_img !=null}">
							<img  src="${pageContext.request.contextPath }/DownloadServlet?fileName=${sessionScope.backUser.u_img}"  class="img-circle" width="80" />
						</c:if>
			          </a></p>
			          <!--管理员名-->
			          <h5 class="centered">${sessionScope.backUser.u_name}</h5>
					<li class="mt"><a
						href="${pageContext.request.contextPath }/back/index.jsp"> <i
							class="fa fa-dashboard"></i> <span>公司信息</span>
					</a></li>
					<li class="sub-menu"><a
						href="javascript:;">
							<i class="fa fa-desktop"></i> <span>用户管理</span>
					</a>
						<ul class="sub">
							<li><a
								href="${pageContext.request.contextPath }/back/user-information.jsp">用户信息</a></li>
							<li><a
								href="${pageContext.request.contextPath }/back/adduser.jsp">添加用户</a></li>
						</ul></li>
					<li class="sub-menu"><a
						href="javascript:;">
							<i class="fa fa-tasks"></i> <span>车次管理</span>
					</a>
						<ul class="sub">
							<li><a
								href="${pageContext.request.contextPath }/back/bus-information.jsp">车次信息</a></li>
							<li><a
								href="${pageContext.request.contextPath }/back/moment-information.jsp">时刻信息</a></li>
							<li><a
								href="${pageContext.request.contextPath }/back/addmoment.jsp">添加时刻表</a></li>
							<li><a
								href="${pageContext.request.contextPath }/back/addsite.jsp">添加车次</a></li>
						</ul></li>
					<li class="sub-menu"><a  class="active"
						href="javascript:;">
							<i class="fa fa-th"></i> <span>站点管理</span>
					</a>
						<ul class="sub">
							<li class="active"><a 
								href="${pageContext.request.contextPath }/back/bussite-information.jsp">站点信息</a></li>
							<li><a
								href="${pageContext.request.contextPath }/back/addbussite.jsp">添加站点</a></li>
								<li><a href="${pageContext.request.contextPath }/back/addbusSites.jsp">新增站点</a></li>
						</ul></li>

					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-comments-o"></i> <span>公告栏管理</span>
					</a>
						<ul class="sub">
							<li><a
								href="${pageContext.request.contextPath }/back/announcement.jsp">公告栏信息</a></li>
						</ul></li>
					<li>
						 <a href="${pageContext.request.contextPath }/back/baidu_maps.jsp">
				              <i class="fa fa-map-marker"></i>
				              <span>百度地图</span>
				              </a>
					</li>
				</ul>
				<!-- sidebar menu end-->
			</div>
			<!--sidebar start-->
		</aside>
		<!--sidebar end-->
		<!--main content start-->
		<section id="main-content">
			<section class="wrapper">
				<!-- row -->
				<div class="row mt">
					<div class="col-md-12">
						<div class="content-panel">
							<table class="table table-striped table-advance table-hover">
								<h4>
									<i class="fa fa-angle-right"></i>时刻列表
								</h4>
								<hr>
								<thead>
									<tr>
										<th>站点编号</th>
										<th>站点名</th>
										<th>车辆编号</th>
										<th>站点在路线中的位置</th>
										<th><i class=" fa fa-edit"></i>操作</th>
									</tr>
								</thead>
								<tbody id="articlist">
									<%-- <c:forEach items="${requestScope.site}" var="site">
										<tr>
											<td>${site.s_id}</td>
											<td>${site.s_name}</td>
											<td>${site.b_id }</td>
											<td>${site.s_location }</td>
											<td>
												<button id="up" class="btn btn-primary btn-xs">
													<i class="fa fa-pencil"></i>
												</button> <a href="Javascript:delFun(${site.s_id })"><button
														id="rmv" class="btn btn-danger btn-xs">
														<i class="fa fa-trash-o "></i>
													</button></a>
											</td>
										</tr>
									</c:forEach> --%>
								</tbody>
							</table>
							<!-- 分页信息 -->
							<div id="showPageInfo"></div>
							<!-- 分页实现    -->
							<div class="col-md-12 text-center">
								<!-- 设置居中 -->
								<ul class="pagination" id="pageItem">

								</ul>
							</div>
							<!-- /content-panel -->
						</div>
						<!-- /col-md-12 -->
					</div>
					<!-- /row -->
			</section>
		</section>
		<!--main content end-->
		<!--footer start-->
		<footer class="site-footer">
			<div class="text-center">
				<p>
					&copy; Copyrights <strong>Dashio</strong>. All Rights Reserved
				</p>
				<div class="credits">
					Created with Dashio template by <a href="https://templatemag.com/">TemplateMag</a>
				</div>
				<a href="index.jsp#" class="go-top"> <i class="fa fa-angle-up"></i>
				</a>
			</div>
		</footer>
		<!--footer end-->
	</section>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">车辆站点位置修改</h4>
				</div>
				<form class="form-horizontal" role="form">
				 <div class="modal-body">
				  <div class="form-group ">
                    <label for="lastname" class="control-label col-lg-4">站点编号 </label>
                    <div class="col-lg-6">
                      <input class="form-control" id="atid" name="atid" type="text" />
                    </div>
                  </div>
				  <div class="form-group">
                     	<label for="firstname" class="control-label col-lg-4">站点名</label>
                    <div class="col-lg-6">
                      <input class=" form-control" id="adname" name="adname" type="text" readonly="readonly"/>
                    </div>
                  </div>
                  <div class="form-group ">
                    <label for="password" class="control-label col-lg-4">车辆编号</label>
                    <div class="col-lg-6">
                      <input class="form-control " id="conten" name="conten" type="text" readonly="readonly"/>
                    </div>
                  </div>
                  <div class="form-group ">
                    <label for="lastname" class="control-label col-lg-4">站点在车辆线路中的位置</label>
                    <div class="col-lg-6">
                      <input class="form-control" id="author" name="author" type="text" readonly="readonly"/>
                    </div>
                  </div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" id="updateBtn">提交更改</button>
					</div>
				 </div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	
	<!-- js placed at the end of the document so the pages load faster -->
	<%-- <script src="${pageContext.request.contextPath }/lib/jquery/jquery.min.js"></script> --%>

	<%-- <script src="${pageContext.request.contextPath }/lib/bootstrap/js/bootstrap.min.js"></script> --%>
	<script class="include" type="text/javascript"
		src="${pageContext.request.contextPath }/lib/jquery.dcjqaccordion.2.7.js"></script>
	<script src="${pageContext.request.contextPath }/lib/jquery.scrollTo.min.js"></script>
	<script src="${pageContext.request.contextPath }/lib/jquery.nicescroll.js" type="text/javascript"></script>
	<script src="${pageContext.request.contextPath }/lib/jquery.sparkline.js"></script>
	<!--common script for all pages-->
	<script src="${pageContext.request.contextPath }/lib/common-scripts.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath }/lib/gritter/js/jquery.gritter.js"></script>
	<script type="text/javascript" src="../lib/gritter-conf.js"></script>
	<!--script for this page-->
	<script src="${pageContext.request.contextPath }/lib/sparkline-chart.js"></script>
	<script src="${pageContext.request.contextPath }/lib/zabuto_calendar.js"></script>
	<!--<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="mySmallModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-sm" role="document">
			<div class="modal-content">
				<form class="form-horizontal" role="form"
					action="${pageContext.request.contextPath}/UserController?op=up"
					method="post">
					站点编号 <input type="text" class="form-control" id="atid" name="atid"
						 /><br /> 
					站点名 <input type="text"
						class="form-control" id="adname" name="adname" readonly="readonly"/><br /> 
					车辆编号<input readonly="readonly"
						type="text" class="form-control" id="conten" name="conten" /><br />
					站点在路线中的位置<input type="text" class="form-control" id="author"
						name="author" readonly="readonly"/><br /> <input type="button" id="updateBtn"
						class="btn btn-danger" value="确定" />
				</form>
			</div>
		</div>
	</div>-->
</body>
<script type="text/javascript">
$(function(){
	//请求ajax
	$.get("${pageContext.request.contextPath}/SiteController",{op:"ajaxshow"},function(data){
		showData(data);
	},"json")
    	//首页
    	$(document).on("click",".first",function(){
    		//发送ajax请求
    		$.get("${pageContext.request.contextPath}/SiteController",{op:"ajaxshow",pageNo:1,pageSize:3},function(data){
    		showData(data);
    	},"json")
    	})
    	//末页
    	$(document).on("click",".last",function(){
    		var totalPage=$("#totalPage").text();
    		//发送ajax请求
    		$.get("${pageContext.request.contextPath}/SiteController",{op:"ajaxshow",pageNo:totalPage,pageSize:3},function(data){
    		showData(data);
    	},"json")
    	})
    	//下一页
    	$(document).on("click",".next",function(){
    		var pageNo=$("#pageNo").text();
    		//发送ajax请求
    		$.get("${pageContext.request.contextPath}/SiteController",{op:"ajaxshow",pageNo:(parseInt(pageNo)+1),pageSize:3},function(data){
    		showData(data);
    	},"json")
    	})
    	//每一页
    	$(document).on("click",".currentPage",function(){
    		var pageNo=$(this).text();
    		//发送ajax请求
    		$.get("${pageContext.request.contextPath}/SiteController",{op:"ajaxshow",pageNo:pageNo,pageSize:3},function(data){
    		showData(data);
    	},"json")
    	})
    	//跳转
    	$(document).on("click",".turnto",function(){
    		//获取number的值
    		var pageNo=$("#turntoId").val();
    		//获取末页值
    		var totalPage=$("#totalPage").text();
    		if(pageNo<1){
    			pageNo=1;
    			$("#turntoId").val(pageNo);
    		}else if(pageNo>totalPage*1){
    			pageNo=totalPage;
    			$("#turntoId").val(pageNo);
    		}
    		//发送ajax请求
    		$.get("${pageContext.request.contextPath}/SiteController",{op:"ajaxshow",pageNo:pageNo,pageSize:3},function(data){
    		showData(data);
    	},"json")
    	})
    	
    	
})
function showData(data){
	//清空
	$("#articlist").empty();
	$("#showPageInfo").empty();
	$("#pageItem").empty();
	//拼接
	$.each(data.data,function(i,site){
		$("#articlist").append( " <tr>\r\n" + 
				"                    <td>"+site.s_id+"</td>\r\n" + 
				"                    <td>"+site.s_name+"</td>\r\n" + 
				"                    <td>"+site.b_id +"</td>\r\n" + 
				"                    <td>"+site.s_location+"</td>\r\n" + 
				"                    <td><a data-toggle=\"modal\" data-target=\"#myModal\"\r\n" + 
				"									data-atid=\""+site.s_id +"\"\r\n" + 								
				"									data-adname=\""+site.s_name +"\"\r\n" + 
				"									data-conten=\""+site.b_id +"\"\r\n" + 
				"									data-author=\""+site.s_location +"\"\r\n" + 
				"									 onclick=\"upFun(this)\">\r\n" + 
				"                      <button class=\"btn btn-primary btn-xs\"><i class=\"fa fa-pencil\"></i></button>\r\n</a>" + 
 
				"                      <a href=\"Javascript:delFun("+site.b_id+","+site.s_location+")\"><button id=\"rmv\" class=\"btn btn-danger btn-xs\"><i class=\"fa fa-trash-o \"></i></button></a>\r\n" + 
				"                    </td>\r\n" + 
				"                  </tr>")
	})
	//显示信息
	$("#showPageInfo").append("当前第<span id='pageNo'>"+data.pageNo+"</span>页/共<span id='totalPage'>"+data.totalPage+
            "</span>页/每页显示<span id='pageSize'>"+data.pageSize+"</span>条/共<span id='totalCount'>"+data.totalCount+"</span>条数据");
	//首页
	if(1==data.pageNo){
		$("#pageItem").append('<li class="disabled"><a href="#">首页</a></li>');
	}else{
		   $("#pageItem").append('<li><a href="#" class="first">首页</a></li>');
	   }
	for(var i=1;i<=data.totalPage;i++){
		   if(i==data.pageNo){
			   $("#pageItem").append('<li class="active"><a href="#">'+i+'</a></li>');
		   }else{
			   $("#pageItem").append('<li><a href="#" class="currentPage">'+i+'</a></li>');
		   } 
	   }
	//下一页
	if(data.pageNo==data.totalPage){
		$("#pageItem").append('<li class="disabled"><a href="#">下一页</a></li>');
	}else{
		$("#pageItem").append('<li><a href="#" class="next">下一页</a></li>');
	}
	 //末页 
	   if(data.pageNo==data.totalPage){
		   $("#pageItem").append('<li class="disabled"><a href="#">末页</a></li>');
	   }else{
		   $("#pageItem").append('<li><a href="#" class="last">末页</a></li>');
	   }
	 //跳转
	  $("#pageItem").append('<li><a href="#"><input type="number" id="turntoId" value="'+data.pageNo+'" min="1" max="'+data.totalPage+
	'" style="width:40px;height:20px"/></a></li>');
  $("#pageItem").append('<li><a href="#" class="turnto">跳转</a></li>');
}

function delFun(sid,location){
	 var b=confirm("是否确定删除车辆编号为:"+sid+"位置在"+location);
	 if(b){
	$.post("${pageContext.request.contextPath}/SiteController",{op:"rmv",sid:sid,location:location},function(data){
		if(data){
		var pageNo=0;
		var pageSize=$("#pageSize").text();		
		var totalCount=$("#totalCount").text();
		if(totalCount%pageSize==0){
			pageNo=$("#pageNo").text()-1;
		}else{
			pageNo=$("#pageNo").text();
		}
			$.get("${pageContext.request.contextPath}/SiteController",{op:"ajaxshow",pageNo:pageNo,pageSize:3},function(data){
	    		showData(data);
	    	},"json")
		}
	})
	 }else{
		 alert("删除失败");
	 }
}
function upFun(obj){
	var atid=$(obj).data("atid");
	var adname=$(obj).data("adname");
	var conten=$(obj).data("conten");
	var author=$(obj).data("author");
	$("#atid").val(atid);
	$("#adname").val(adname);
	$("#conten").val(conten);
	$("#author").val(author);
  }
//修改
$("#updateBtn").click(function(){
$.post("${pageContext.request.contextPath}/SiteController",{op:"up",sid:$("#atid").val(),bid:$("#conten").val(),location:$("#author").val()},function(data){
if(data){
  //关闭模态框
   $('#myModal').modal('hide');
  /*  $(".modal-backdrop").remove();
   $('body').removeClass('model-open'); */
  //刷新内容
 $.get("${pageContext.request.contextPath}/SiteController",{op:"ajaxshow",pageNo:$("#totalPage").text(),pageSize:3},function(data){
	showData(data);
},"json");
}
},"json")
})
</script>
</html>